import React from 'react';
import { NavBar, Icon } from "antd-mobile"
import CityInput from "../../components/CityInput"
import Css from "./index.module.scss"
import Filter from "./Filter/index"
import Picker from "../../components/Picker"
import { request } from "../../utils/request"
import { connect } from "react-redux"
import HouseItem from "../../components/houseItem"
import { List } from "react-virtualized"

/**
 * 总结
 * 初次渲染房源数据 凭借cityId,start,end
 *   1，通过redux获取城市名称cityname
 *   2,在页面挂载完毕的生命周期中通过城市名称异步获取到城市的id，并存储到全局中去
 *   3，封装获取房源列表的函数getList()
 *   4,在页面挂载完毕时获取一次房源数据
 * 页面滚动到底部的触底事件进行分页
 *   1，还有没有下一页的逻辑 hasmore =start<TotalCount
 *   2，分页事件如何触发三个高度 scrollHeight clientHeight scrollTop
 *   3,是否到底，scrollHeight-clientHeight-scrollTop
 *   4，是否是第一次渲染  判断数据 this.state.length===0  return 
 *   5,请求数据成功后是追加，而不是新数据替换旧数据
 *   6，节流阀  防止滚动事件在一秒内触发n次，上一个请求还未完成，下一个请求不能开始
 *   7，子向父传递了一个自定义事件和筛选条件组成的对象
 *         1，重置
 *               重置旧的list数据，置为[]
 *               重置start开始数据条数start =1
 *               重置end，结束数据为end=20
 *         2,将筛选条件赋值给全局的变量，同时修改getList()函数中的params参数，增加filterItem
 *         3,重新获取一次房源数据并渲染出来
 */
class Found extends React.Component {
    state = {
        // 房源列表
        list: []
    }
    Params = {
        cityId: -1,
        // 从第几条数据开始
        start: 1,
        // 从第几条数据结束
        end: 20
    }
    TotalCount = -1;
    // 节流阀
    isLoading = false;
    FilterItem = {}

    async  componentDidMount() {
        // 先拿到城市名称，通过城市名称拿到城市id，通过城市id拿到房源数据
        console.log(this.props.cityName);
        const cityName = this.props.cityName;
        const id = (await request.get("/area/info?name=" + cityName)).data.body.value;
        // 存储城市的id
        this.Params.cityId = id;
        // 获取房源列表
        this.getList();

    }
    // 封装获取房源列表数据
    getList = async () => {
        // 1.0 根据城市id获取房源数据
        const res = await request.get('/houses', { params: { ...this.Params, ...this.FilterItem } });
        // 获取数据的总条数
        this.TotalCount = res.data.body.count;
        // 分页追加数据
        this.setState({ list: [...this.state.list, ...res.data.body.list] });
        console.log(this.TotalCount)
        // 获取完毕，请求已经回来
        this.isLoading = false;

    }
    // 接收子组件传递过来的自定义函数
    onHandleSubmit = (filterItem) => {
        console.log(filterItem);
        // 1 ,先重置  清空旧的数组  页面start置为1 end改为20
        this.setState({ list: [] })
        this.Params.start = 1;
        this.Params.end = 20;
        // 赋值筛选条件
        this.FilterItem = filterItem;
        // 获取房源数据
        this.getList();


    }
    rowRenderer = ({ key, index, style }) => {
        return (
            <div key={key} style={style}>
                <HouseItem houseItem={this.state.list[index]} />
            </div>
        )
    }
    // 列表的滚动事件
    onScroll = ({ clientHeight, scrollHeight, scrollTop }) => {
        // console.clear();
        // console.log(clientHeight)  容器的高度
        // console.log(scrollHeight)   卷去的高度
        // console.log(scrollTop)    滚动条距离顶部的距离
        // scrollHeight-clientHeight-scrollTop  滚动条距离底部的距离
        // 1.是否是页面一开始的时候 就触发scroll
        const isFirst = this.state.list.length === 0
        //2.是否触底了
        const isReachBottom = scrollHeight - clientHeight - scrollTop < 15;
        //    3,是否有下一页数据
        const hasMore = this.Params.start < this.TotalCount;
        if (isFirst || !hasMore || !isReachBottom || this.isLoading) {
            return;
        }
        // 满足所有条件后加载下一页
        // 正在获取下一页数据
        this.isLoading = true;
        this.Params.start += 20;
        this.Params.end += 20;
        this.getList();

    }
    render() {
        const { list } = this.state;
        return (
            <div className={Css.house_found}>
                {/* 导航栏开始 */}
                <div className={Css.found_nav}>
                    <NavBar
                        style={{ backgroundColor: "#f6f6f6" }}
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => this.props.history.goBack()}
                    >列表找房</NavBar>
                </div>
                <div className={Css.city_input}>
                    <CityInput iconColor="#21b97a" />
                </div>
                {/* 导航栏结束 */}
                {/* 筛选组件开始 */}
                <div className="found_filter">
                    {/* 筛选器 */}
                    <Filter onHandleSubmit={this.onHandleSubmit} />
                    {/* <Picker /> */}
                </div>
                {/* 筛选组件结束 */}
                {/* 列表内容开始 */}
                <div className={Css.house_list}>
                    <List
                        width={window.screen.width - 30}
                        height={window.screen.height - 130}
                        rowCount={list.length}
                        rowHeight={120}
                        rowRenderer={this.rowRenderer}
                        onScroll={this.onScroll}
                    />
                </div>
                {/* 列表内容结束 */}
            </div >
        );
    }
}
const mapStateToProps = (state) => ({
    cityName: state.CityReducer.cityname.name
})
export default connect(mapStateToProps)(Found);